<!DOCTYPE html>
<html lang="en">
<head>
    <link href="/bootstrap/css/bootstrap.css"   rel="stylesheet" />

    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>


    <meta charset="utf-8" />
    <title>登录 - 洋葱后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- App css -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="css/app.min.css" rel="stylesheet" type="text/css" />

</head>

<body class="authentication-bg">

<div class="account-pages mt-5 mb-5" id="app">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-5">
                <div class="card">

                    <div class="card-body p-4">

                        <div class="text-center w-75 m-auto">

                            <span><img src="assets/images/logo-dark.png" alt="" height="22"></span>

                            <p class="text-muted mb-4 mt-3">请输入管理员的名称和密码！</p>
                        </div>

                        <form>

                            <div class="form-group mb-3">
                                <label for="adminName">名称</label>
                                <input class="form-control" v-model="adminName" type="text" id="adminName" required="" placeholder="键入你的名称">
                            </div>

                            <div class="form-group mb-3">
<!--                                <a href="pages-recoverpw.html" class="text-muted float-right"><small></small></a>-->
                                <label for="password">密码</label>
                                <input class="form-control" v-model="password" type="password" required="" id="password" placeholder="键入你的密码">
                            </div>

                            <div class="form-group mb-3">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="checkbox-signin" checked>
                                    <label class="custom-control-label" for="checkbox-signin">记住我</label>
                                </div>
                            </div>

                            <button type="button" @click="login" class="btn btn-primary btn-block">登录</button>
                        </form>
                    </div> <!-- end card-body -->
                </div>
                <!-- end card -->

            </div> <!-- end col -->
        </div>
        <!-- end row -->
    </div>
    <!-- end container -->
</div>
<!-- end page -->


<!-- App js -->
<script src="js/vendor.min.js"></script>
<script src="js/app.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            adminName:"",
            password:""
        },
        methods:{
            login:function(){
                console.log("名称：" + this.adminName + "密码：" + this.password)
                axios.post('/admin/login',"adminName="+this.adminName+"&adminPassword="+this.password)
                .then(function (response){
                    if(response.data.code==200){
                        alert(response.data.message)
                        console.log(response.data.object.adminID)
                        window.localStorage.setItem("adminID",response.data.object.adminID)
                        window.localStorage.setItem("adminName",response.data.object.adminName)
                        window.localStorage.setItem("adminPassword",response.data.object.adminPassword)
                        location.href="userQuery.html"  //成功则跳转回userQuery.html页面
                    }else{
                        alert(response.data.message)
                    }
                })
                .catch(function (error){
                    console.log(error);
                })
            }
        }
    })
</script>

</body>
</html>